<template>
	<div class="goods-swiper">
		<van-swipe lazy-render>
			<van-swipe-item v-for="(thumb,index) in images" key="thumb">
				<van-image :src="thumb" lazy-load @click="preview(index)"/>
			</van-swipe-item>
			<template #indicator="{ active, total }">
				<div class="indicator">{{ active + 1 }}/{{ total }}</div>
			</template>
		</van-swipe>
	</div>
</template>
<style lang="scss" scoped>
.goods-swiper {
	.van-image,.van-image img {
		width:100vw; aspect-ratio: 1; height:auto;
		display: block;
	}
	.indicator {
		position: absolute; right:10px; bottom:10px;font-size: 13px;padding: 3px 8px;line-height:15px;
		color:var(--white-color);background: rgba(0, 0, 0, 0.3); border-radius:12px; letter-spacing:2px;
	}
}
</style>
<script lang="ts" setup>
import { showImagePreview } from 'vant'
//props
const props=defineProps({
	images:{
		type:Array<String>,
	}
})

//methods
const preview=(index:number)=>{
	showImagePreview({
		images: props.images as string[],
		startPosition: index,
	});
}
</script>